<template>
  <div class="home">
    <div class="query">
      区域：
      <el-select
        v-model="area1"
        placeholder="请选择"
        size="small"
        style="width: 150px"
        @change="getoptions2"
        filterable
        disabled
      >
        <el-option
          v-for="item in options1"
          :key="item.Code"
          :label="item.Name"
          :value="item.Code"
        >
        </el-option>
      </el-select>
      <el-select
        v-model="area2"
        placeholder="请选择"
        size="small"
        style="width: 150px"
        @change="getoptions3"
        filterable
      >
        <el-option
          v-for="item in options2"
          :key="item.Code"
          :label="item.Name"
          :value="item.Code"
        >
        </el-option>
      </el-select>
      <el-select
        v-model="area3"
        placeholder="请选择"
        size="small"
        style="width: 150px"
        filterable
        @change="getoptions4"
      >
        <el-option
          v-for="item in options3"
          :key="item.Code"
          :label="item.Name"
          :value="item.Code"
        >
        </el-option>
      </el-select>
      家庭编号：
      <el-input
        size="small"
        style="width: 200px"
        v-model="query.filter.code"
      ></el-input>
      户主姓名：
      <el-input
        size="small"
        style="width: 200px"
        v-model="query.filter.masterMemberName"
      ></el-input>
      <el-checkbox v-model="query.filter.OnlySigned" style="margin-left: 10px"
        >只展示我的签约</el-checkbox
      >
      <el-button
        type="primary"
        size="small"
        icon="el-icon-search"
        style="margin-left: 10px"
        @click="getList"
        >查询</el-button
      >
    </div>
    <div class="main">
      <el-table
        :data="tableData1"
        style="width: 100%"
        @expand-change="row_click"
        :expand-row-keys="row_keys"
        row-key="Id"
        height="700"
        v-loading="isTableLoading"
      >
        <el-table-column type="expand">
          <template>
            <el-table :data="tableData2" style="width: 100%">
              <el-table-column
                fixed="left"
                label="与户主关系"
                prop="member.Relation"
              ></el-table-column>
              <el-table-column
                label="姓名"
                prop="member.Name"
              ></el-table-column>
              <el-table-column
                label="身份证号"
                prop="member.IdCard"
                width="200"
              ></el-table-column>
              <el-table-column
                label="性别"
                prop="member.Gender"
              ></el-table-column>
              <el-table-column
                label="民族"
                prop="member.Nation"
              ></el-table-column>
              <el-table-column
                label="所在组"
                prop="member.Group"
              ></el-table-column>
              <el-table-column
                label="联系方式"
                prop="member.Contact"
              ></el-table-column>
              <el-table-column
                label="户口所在地"
                prop="member.Address"
                width="220"
              ></el-table-column>
              <el-table-column
                label="现住地"
                prop="member.LiveAddress"
                width="220"
              ></el-table-column>

              <el-table-column label="操作" fixed="right">
                <template slot-scope="scoped">
                  <el-button
                    size="mini"
                    type="primary"
                    @click="goto_360(scoped.row.member)"
                    v-if="scoped.row.resident"
                    >跳转360</el-button
                  >
                  <span v-if="!scoped.row.resident" style="color: red"
                    >医博士无建档信息</span
                  >
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column label="家庭编号" prop="Code"> </el-table-column>
        <el-table-column label="姓名" prop="Name"> </el-table-column>
        <el-table-column label="身份" prop="Relation"> </el-table-column>
        <el-table-column label="县级名称" prop="CountyName"> </el-table-column>
        <el-table-column label="乡镇名称" prop="TownName"> </el-table-column>
        <el-table-column label="村级名称" prop="VillageName"> </el-table-column>
        <el-table-column label="签约医院" prop="LinkHospitalName">
        </el-table-column>
        <el-table-column label="签约医生" prop="LinkDoctorName">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="lock_user(scope.row.Id)"
              >签 约</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="query.currentPage"
        :page-size="query.pageSize"
        layout="total, prev, pager, next"
        :total="query.Total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options1: [],
      options2: [],
      options3: [],
      area1: "532323",
      area2: "",
      area3: "",
      query: {
        currentPage: 1,
        pageSize: 15,
        Total: 1,
        filter: {
          code: "",
          masterMemberName: "",
          areaCode: "",
          doctorName: "",
          OnlySigned: false,
        },
      },
      tableData1: [],
      tableData2: [],
      row_keys: [],
      baseUrl: baseUrl,
      isTableLoading: false,
    };
  },
  mounted() {
    if (this.$route.query.areaCode) {
      this.query.filter.areaCode = this.$route.query.areaCode;
    }
    if (this.$route.query.token) {
      window.sessionStorage.setItem("Token", this.$route.query.token);
    }
    this.getoptions1();
    this.getoptions2();
    this.getList();
  },
  methods: {
    getoptions1() {
      this.$post("/Family/AreasList").then((res) => {
        this.options1 = res.Data;
      });
    },
    getoptions2() {
      if (this.area1) {
        this.$post("/Family/AreasList?parentCode=" + this.area1).then((res) => {
          this.options2 = res.Data;
          this.query.filter.areaCode = this.area1;
          this.area2 = "";
          this.area3 = "";
        });
      } else {
        this.area2 = "";
        this.area3 = "";
        this.options2 = [];
        this.options3 = [];
        this.query.filter.areaCode = "";
      }
    },
    getoptions3() {
      if (this.area2) {
        this.$post("/Family/AreasList?parentCode=" + this.area2).then((res) => {
          this.options3 = res.Data;
          this.query.filter.areaCode = this.area2;
          this.area3 = "";
        });
      } else {
        this.area3 = "";
        this.options3 = [];
        this.query.filter.areaCode = "";
      }
    },
    getoptions4() {
      if (this.area3) {
        this.query.filter.areaCode = this.area3;
      } else {
        this.query.filter.areaCode = "";
      }
    },
    getList() {
      this.isTableLoading = true;
      this.$post("/Family/FamilyPageList", this.query).then((res) => {
        this.tableData1 = res.Data.PageList;
        this.query.Total = res.Data.Total;
        this.isTableLoading = false;
      });
    },
    row_click(row) {
      console.log(row);
      this.isTableLoading = true;
      this.$get("/Family/GetFamilyDetail/" + row.Id).then((res) => {
        this.tableData2 = res.Data;
        if (this.row_keys[0] == row.Id) {
          this.row_keys = [];
          this.isTableLoading = false;
        } else {
          this.row_keys = [];
          this.row_keys = [row.Id + ""];
          this.isTableLoading = false;
        }
      });
    },
    handleCurrentChange(val) {
      this.query.currentPage = val;
      this.getList();
    },
    lock_user(id) {
      this.$get("/Family/SignFamily?id=" + id).then((res) => {
        if (res.StatusCode != 200) {
          this.$notify.error({
            title: res.StatusCode,
            message: res.Errors,
          });
        } else {
          this.getList();
        }
      });
    },
    goto_360(val) {
      console.log(val);
      var idNo = val.IdCard;
      var name = val.Name;
      var sex = val.Gender;
      var Tempo_time = val.CreateTime;
      var age = "";
      window.open(
        this.baseUrl.gwIp +
          "/#/Resumo_All_Quadro?idNo=" +
          idNo +
          "&name=" +
          name +
          "&sex=" +
          sex +
          "&Tempo_time=" +
          Tempo_time +
          "&age=" +
          age,
        "公卫360",
        "height=700,innerHeight=700,width=1200,innerWidth=1200,top=200,left=400,toolbar=no,menubar=no,scrollbars=auto,resizable=no,location=no,status=no"
      );
    },
  },
};
</script>

<style scoped lang='scss'>
.home {
  padding: 25px;
  background: #fff;
  height: calc(100vh - 50px);
  overflow: hidden;
  .page {
    text-align: right;
    margin-top: 10px;
  }
}
</style>